// 打包优化分析 ----- star
// 正常打包项目 ---- 10m的项目，太大了，为什么太大？因为把elementUI引入了并打包进入了项目中了
// 如何解决呢？打包的剔除elementUI框架，然后配置一个在线地址。
// 配置完成后，开发的时候也会引入在线地址了， 这会导致开发的时候，页面加载慢，开发效率低，如何解决呢？
// 答：在配置文件中，添加判断，判断用户是在哪个环境中运行项目的，如果是开发环境则不需要引入地址，否则需要。
// 如何判断用户当前是处于哪个环境呢？
// 答：我们可以通过 process.env.NODE_ENV的值来判断，当值为product的时候，表示当前在生产环境中(npm run build)
// 当值为development的时候，表示在开发环境，也就是在npm run serve的时候


// 打包优化分析 ----- end

// 我们可以通过 process.env.NODE_ENV 获取到当前项目的运行环境
// process.env.NODE_ENV默认情况下2种值：product（生成） 当我们执行npm run build的时候，我们就能这个值
//                                      development(开发) 当我们执行npm run serve的时候，就能得到development
// 当isProd值为true的时候表示 当前正在打包 （npm run build）
const isProd = process.env.NODE_ENV === 'production' // 是否生产环境


let cdn = {
  css: [
    // element-ui css
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css',// 样式表
    // 富文本框插件样式
    'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css'
  ],
  js: [
    // vue must at first!
    'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js', // vuejs
    // element-ui js
    'https://unpkg.com/element-ui/lib/index.js', // elementUI
    // 富文本框插件
    'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
  ]
}

let externals = {
  'vue': 'Vue',
  'element-ui': 'ELEMENT',
  'quill': 'Quill'
}


module.exports = {
  lintOnSave: false,
  devServer: {
      open: true,
      host: "localhost" // 默认0.0.0.0
  },
  configureWebpack: {
      externals: isProd?externals:{}
  },
  // 将cdn的资源挂载到插件上
  chainWebpack (config) {
    config.plugin('html').tap(args => {
      args[0].cdn = isProd? cdn: {css:[],js:[]}
      return args
    })
  }
}